<template>
  <div class="setting-view-container-menu">
    <h4>{{$t('customer.setting.customerNavBar.label1')}}</h4>
    <ul class="customer-nav-bar">
      <li>
        <a href="/pcoperation/setting/customer/customerFunc" :class="current === 'customerFunc' && 'active'">
          <i class="iconfont icon-caidan_kehumokuai" ></i>
          {{$t('customer.setting.customerNavBar.label2')}}
        </a>
      </li>

      <li v-if="showProductSetting">
        <a :href="`${$resourcePrefix}/setting/product/productType`" :class="current === 'customerFunc' && 'active'">
          <i class="iconfont icon-caidan-chanpin1" ></i>
          {{$t('customer.setting.customerNavBar.label3')}}
        </a>
      </li>

      <li>
        <a href="/pcoperation/setting/customer/remind" :class="current === 'remind' && 'active'">
          <i class="iconfont icon-chanpinxiangqing-chanpintixing"></i>
          {{$t('customer.setting.customerNavBar.label4')}}
        </a>
      </li>
      <li>
        <a href="/pcoperation/setting/customerEvaluate/evaluate" :class="current === 'evaluate' && 'active'">
          <i class="iconfont icon-smile-fill1"></i>
          {{$t('customer.setting.customerNavBar.label5')}}
        </a>
      </li>
      <li>
        <a :href="`${$resourcePrefix}/setting/customer/additional`" :class="current === 'additional' && 'active'">
          <i class="iconfont icon-fujiazujian1"></i>
          {{$t('customer.setting.customerNavBar.label6')}}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import * as SettingCusProApi from '@src/api/SettingCusProApi';
export default {
  name: 'customer-nav-bar',
  props: {
    current: String
  },

  data() {
    return {
      // 是否展示产品菜单
      showProductSetting:false
    };
  },

  async mounted(){
    try{
      let {data,errorCode}=await SettingCusProApi.customerCheckShow();
      if(errorCode !== 0) return;

      this.showProductSetting = data.showProductSetting || false;
    }catch(err){
      console.error(err);
    }
  },
}
</script>

<style lang="scss" scoped>
.setting-view-container-menu{
  display: none;
  box-sizing: border-box;
  border-radius: 4px;
  background: #fff;
  width: 194px;
  min-width: 194px;
  height: 100%;
  h4{
    padding: 0 16px;
    line-height: 48px;
    margin: 0;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: var(--bbx-text-color-primary, #262626);
  }
}
ul,.customer-nav-bar{
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  li > a{
    padding: 0 16px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: var(--bbx-text-color-regular, #595959);
    line-height: 40px;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    
    &:hover{
      color: var(--bbx-text-color-regular, #595959);
      background-color: rgba(0, 0, 0, 0.04);
    }
    &.active{
      background-color: $color-primary-light-1;
      color: var(--bbx-color-primary, $color-primary-light-6);
    }
  }
  .iconfont{
    margin-right:10px;
  }
}
</style>